{% load static %}
<div id='right-list' class="col-xs-12 col-sm-12 col-md-4 col-lg-3">
    <div id="hot-posts">
    <div class="panel panel-test">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span class="glyphicon glyphicon-flag"></span>
                热门文章
                <span class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right" data-toggle="collapse" data-target="#hot-post-list"></span>
            </h3>
        </div>
        <ul id="hot-post-list" class="list-group collapse in">
            {% for article in hot_article_list %}
                <li class="list-group-item">
                <a href="{% url 'blog:article_detail' article.id article.slug %}" target="_blank">
                    <span class="hot-post-title">{{ article.title }}</span>
                </a>
                <span class="badge">{{ article.views }}</span>
                </li>
            {% endfor %}
        </ul>
    </div>
    </div>
    <div id="new_comments">
    <div class="panel panel-comments">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span class="glyphicon glyphicon-comment"></span>
                最新评论
                <span class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right" data-toggle="collapse" data-target="#new_comment_list"></span>
            </h3>
        </div>
        <div id="new_comment_list" class="list-group collapse in">
            {% for comment in new_comment_list %}
                <li class="list-group-item clearfix">
                <div class="comment-tx">
                    {% if comment.user.image %}
                        <img src="{{ MEDIA_URL }}{{ comment.user.image }}" width="40" height="40">
                    {% else %}
                        <img src="/media/default.png" width="40" height="40">
                    {% endif %}
                </div>
                <div class="comment-info">
                    <div>
                        <a href="#" style="color: #438904;font-size: 14px;">{{ comment.user.username }} 评论：</a>
                    </div>
                </div>
                <div class="comment-info">
                    <a href="{% url 'blog:article_detail' comment.article.pk comment.article.slug %}" style="font-size: 12px;">
                        {% autoescape on%}
                        {{comment.text|slice:"12" }}
                        {% endautoescape %}
                        {% if comment.text|length > 12 %}
                        ......
                        {% endif %}
                    </a>
                </div>
                </li>
            {% endfor %}
        </div>
    </div>
    </div>
    <div id="user-list">
    <div class="panel panel-test">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span class="glyphicon glyphicon-user"></span>
                活跃用户
                <span class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right" data-toggle="collapse" data-target="#hot-user-list"></span>
            </h3>
        </div>
        <div id="hot-user-list" class="list-group" style="padding: 10px;">
            {% for user in hot_user_list %}
                {% if user.image %}
                    <img class="user-avatar" src="{{ MEDIA_URL }}{{ user.image }}">
                {% else %}
                    <img class="user-avatar" src="/media/default.png">
                {% endif %}
            {% endfor %}
        </div>
    </div>
    </div>
    <div id="link-list">
    <div class="panel panel-test">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span class="glyphicon glyphicon-link"></span>
                友情链接
                <span class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right" data-toggle="collapse" data-target="#links"></span>
            </h3>
        </div>
        <div id="links" class="list-group collapse in" style="padding: 10px;">
            {% for link in link_list %}
                <a title="{{ link.name }}" target="_blank" href="{{ link.url }}" class="btn btn-xs btn-{{ link.color }}">{{ link.name }}</a>
            {% endfor %}
        </div>
    </div>
    </div>
    <div id="weixin">
    <div class="panel panel-test">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span class="glyphicon glyphicon-yen"></span>
                打赏
                <span class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right" data-toggle="collapse" data-target="#weixin-list"></span>
            </h3>
        </div>
        <ul id="weixin-list" class="list-group collapse in">
            <img src="{% static 'media/wjdweixin.png' %}" width="253" height="250">
            <p style="color: #3e8f3e;">支持微信支付，随意就好，建议1-20元</p>
        </ul>
    </div>
    </div>
</div>